<template>
    <div class="app-header">
        <Menu class="top-memu" mode="horizontal" theme="dark" :active-name="activeName" @on-select="routeTo">
            <Row>
                <Col span="4">
                <div class="layout-logo">Google Inc</div>
                </Col>
                <Col span="12">
                <div class="layout-nav">
                    <Menu-item name="index">
                        <Icon type="ios-home"></Icon>
                        首页
                    </Menu-item>
                    <Menu-item name="order">
                        <Icon type="ios-cart"></Icon>
                        订单
                    </Menu-item>
                    <Menu-item name="user">
                        <Icon type="ios-people"></Icon>
                        用户
                    </Menu-item>
                    <Menu-item name="product">
                        <Icon type="ios-box"></Icon>
                        商品
                    </Menu-item>
                    <Menu-item name="operation">
                        <Icon type="ios-world"></Icon>
                        运营
                    </Menu-item>
                    <Menu-item name="analytics">
                        <Icon type="ios-analytics"></Icon>
                        统计
                    </Menu-item>
                    <Menu-item name="system">
                        <Icon type="ios-cog"></Icon>
                        系统
                    </Menu-item>
                </div>
                </Col>
                <Col span="6">
                </Col>
            </Row>
        </Menu>
    </div>
</template>

<script>
export default {
    data() {
        return {
        };
    },
    computed: {
        activeName() {
            let firstPath = this.$route.path.split('/')[1];
            return firstPath;
        },
    },
    methods: {
        routeTo(name) {
            this.$router.push(`/${name}`);
        },
    },
    mounted() {
    },
};
</script>

<style scoped lang="less">
.top-memu {
    background-color: #2D5F8B;
    height: 46px;
    line-height: 46px;
    &.ivu-menu-horizontal .ivu-menu-item {
        color: #b6d0e7;
        font-size: 15px;
        padding: 0 15px;
    }
    .layout-logo {
        width: 100px;
        height: 30px;
        color: #FFF;
        float: left;
        position: relative;
        top: 8px;
        left: 20px;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
    }
}
</style>
